import {Box, Divider} from "@mui/material";
import {Resizable} from "re-resizable";


const IndexPage = () => {

    return (
        <>
            {/*主体框架*/}
            <Box sx={{
                width: '100%',
                height: '100%',
                display: 'flex',
                justifyContent: 'start'
            }}>
                <Resizable
                    defaultSize={{
                        width: 220,
                        height: '100%'
                    }}
                    bounds={'parent'}
                    minWidth={220}
                    maxWidth={'50%'}
                    minHeight={'100%'}
                    enable={
                        {
                            top: false,
                            right: true,
                            bottom: false,
                            left: false,
                            topRight: false,
                            bottomRight: false,
                            bottomLeft: false,
                            topLeft: false
                        }
                    }
                    style={{
                        backgroundColor: 'rgb(242,242,242)'
                    }}
                >
                    可以左右拖动的项目目录
                </Resizable>
                <Divider orientation={'vertical'} flexItem/>
                {/*项目详细信息和文件区域*/}
                <Box sx={{
                    flexGrow: 1,
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'start'
                }}>
                    <Resizable
                        defaultSize={{
                            width: '100%',
                            height: 230
                        }}
                        bounds={'parent'}
                        minWidth={'100%'}
                        maxWidth={'100%'}
                        minHeight={200}
                        maxHeight={'50%'}
                        enable={
                            {
                                top: false,
                                right: false,
                                bottom: true,
                                left: false,
                                topRight: false,
                                bottomRight: false,
                                bottomLeft: false,
                                topLeft: false
                            }
                        }
                    >
                        项目详细
                    </Resizable>
                    <Divider orientation={'horizontal'} flexItem/>
                    <Box sx={{flexGrow: 1}}>
                        项目文件结构
                    </Box>
                </Box>
            </Box>
        </>
    )
}

export {IndexPage}